<!-- 优惠劵详情 -->
<template>
	<view class="page_box">
		<!-- 标题栏 -->
		<shopro-navbar back-icon-color="#fff" :background="{}"
			:backTextStyle="{ color: '#fff', fontSize: '36rpx', fontWeight: '500' }" backText="优惠券详情"></shopro-navbar>
		<view class="content_box">
			<scroll-view class="scroll-box" scroll-y="true" scroll-with-animation enable-back-to-top
				:scroll-into-view="scrollId" @scroll="onScroll">
				<!-- 详情卡片 -->
				<view class="coupon-box">
					<view class="top u-flex-col u-col-center">
						<view class="img-box u-flex u-row-center u-col-center">
							<image class="coupon-img" :src="$IMG_URL + '/imgs/coupon.png'" mode=""></image>
						</view>
						<!-- <view class="title" v-if="couponData.type != 'discount'">{{ couponDetail.amount || '0.00' }}元优惠券</view> -->
						<view class="title" v-if="couponData.type != 'discount'">{{ couponDetail.name }}</view>
						<view class="title" v-else>{{ couponDetail.name }}</view>
						<view class="tip">满{{ couponDetail.enough || '0.00' }}元可用</view>
						<button class="u-reset-button"
							:class="['can_use', 'can_get'].includes(btnStataus) ||　!btnStataus ? 'use-btn' : 'fail-btn'"
							@tap="goScroll">
							{{ btnStatusText[btnStataus] || '立即领取' }}
						</button>
						<view class="time" v-if="couponDetail.usetime && couponDetail.usetime.start">
							有效期：{{ $u.timeFormat(couponDetail.usetime.start, 'yyyy-mm-dd') }} 至
							{{ $u.timeFormat(couponDetail.usetime.end, 'yyyy-mm-dd') }}
						</view>
						<view class="coupon-line"></view>
					</view>
					<view class="bottom">
						<view class="notice-item">
							<view class="notice-title">优惠券说明</view>
							<view class="notice-detail">{{ couponDetail.description || '暂无说明~' }}</view>
						</view>
					</view>
				</view>

				<!-- 适用商品 -->
				<view class="coupon-goods u-p-30" v-if="couponGoods.length">
					<view class="coupon-goods-title" id="couponGoods">适用商品</view>
					<view class="goods-list u-m-b-20 u-p-20" v-for="goods in couponGoods" :key="goods.id">
						<shopro-mini-card :image="goods.image" :title="goods.title" :subtitle="goods.subtitle"
							:price="goods.price" :originPrice="goods.original_price"
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: goods.id } })"></shopro-mini-card>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				couponDetail: {},
				couponGoods: [],
				scrollId: '',
				nowTime: new Date().getTime(),
				options: {},
				btnStatusText: {
					can_use: '立即使用',
					used: '已使用',
					expired: '已失效',
					cannot_use: '暂不可用',
					can_get: '立即领取',
					cannot_get: '不可领取'
				},
				btnStataus: ''
			};
		},
		computed: {},
		onLoad() {
			this.options = this.$Route.query;
			this.getCouponDetail();
			this.getCouponGoods();
		},
		methods: {
			// 领取优惠劵
			getCoupon() {
				let that = this;
				that.$http(
					'coupons.get', {
						id: that.$Route.query.id
					},
					'领取中...'
				).then(res => {
					if (res.code === 1) {
						this.options.userCouponId = res.data.id;
						that.getCouponDetail();
						that.$u.toast('领取成功')
					}
				});
			},
			// 优惠券详情
			getCouponDetail() {
				let that = this;
				that.$http('coupons.detail', {
					id: that.$Route.query.id,
					user_coupons_id: that.options.userCouponId
				}).then(res => {
					if (res.code === 1) {
						that.couponDetail = res.data;
						if (res.data.status_code) {
							this.btnStataus = res.data.status_code;
						}
					}
				});
			},
			// 适用商品
			getCouponGoods() {
				let that = this;
				that.$http('coupons.goods', {
					id: that.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						that.couponGoods = res.data.data;
					}
				});
			},
			onScroll() {
				this.scrollId = '';
			},
			goScroll() {
				if (!this.options.userCouponId) {
					this.getCoupon();
				} else {
					if (this.couponDetail.goods_ids === '0' && this.btnStataus == 'can_use') {
						this.$Router.push({
							path: '/pages/goods/list'
						});
						return;
					}
					if (this.couponDetail.goods_ids != '0' && this.btnStataus == 'can_use') {
						this.$Router.push({
							path: '/pages/goods/list'
							// path: '/pages/index/index'
						});
					}
					this.scrollId = 'couponGoods';
				}
			}
		}
	};
</script>

<style lang="scss">
	.page_box {
		background: linear-gradient(180deg, #0099E5, #0099E5);
	}

	.coupon-box {
		margin: 100rpx 30rpx 0;
		border-radius: 20rpx;
		background-color: #fff;

		.top {
			border-radius: 20rpx 20rpx 0 0;
			background-image: radial-gradient(circle at bottom left, #f6d69d, #f6d69d 16rpx, transparent 17rpx),
				radial-gradient(circle at bottom right, #f6d69d, #f6d69d 16rpx, transparent 17rpx);
			padding: 110rpx 0 40rpx 0;
			position: relative;
			z-index: 5;

			.coupon-line {
				width: 95%;
				border-bottom: 2rpx dashed #f3ce90;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				z-index: 6;
			}

			.img-box {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -70rpx;

				.coupon-img {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.title {
				font-size: 40rpx;
				font-weight: bold;
				line-height: 40rpx;
				margin-bottom: 30rpx;
			}

			.tip {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 50rpx;
			}

			.use-btn {
				width: 386rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, #0099E5, #0099E5);
				border-radius: 40rpx;
				color: rgba(#fff, 0.9);
				margin-bottom: 30rpx;
			}

			.fail-btn {
				width: 386rpx;
				line-height: 80rpx;
				background: rgba(245, 245, 245, 1);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(188, 188, 188, 1);
				margin-bottom: 30rpx;
			}

			.time {
				color: #999;
				font-size: 26rpx;
			}
		}

		.bottom {
			border-radius: 0 0 20rpx 20rpx;
			background-image: radial-gradient(circle at top left, #f6d69d, #f6d69d 16rpx, transparent 17rpx),
				radial-gradient(circle at top right, #f6d69d, #f6d69d 16rpx, transparent 17rpx);
			padding: 40rpx 30rpx;

			.notice-item {
				border-bottom: 1rpx solid #eeeeee;
				min-height: 90rpx;
				width: 100%;

				.notice-title {
					font-weight: 500;
					font-size: 26rpx;
				}

				.notice-detail {
					font-size: 24rpx;
					color: #666;
					margin-top: 10rpx;
					padding-bottom: 10rpx;
					text-indent: 30rpx;
				}
			}
		}
	}

	// 优惠券商品
	.coupon-goods {
		.coupon-goods-title {
			font-size: 30rpx;
			font-weight: bold;
			height: 80rpx;
		}

		.goods-list {
			background: #fff;
			border-radius: 20rpx;
		}
	}
</style>